<script>
export default {
  props: {
    type: {
      type: String,
      required: true,
      default: 'before'
    },
    fieldCfg: {
      type: Object,
      requried: true,
      default() {
        return {}
      }
    },
    after: {
      requried: true,
      default: null
    },
    before: {
      requried: true,
      default: null
    }
  },
  data() {
    return {
      dialogTableVisible: false
    }
  },
  computed: {
    data() {
      console.log(this.before)
      return this.type === 'before' ? this.before : this.after
    }
  },
  methods: {
    openTable() {
      this.dialogTableVisible = true
    },
    downloadAttachment(row) {
      const url = this.attachment(row)
      if (typeof url !== 'string' || url.trim() === '') { return }
      window.open(url)
    },
    attachment(row) {
      return row?.attachment?.path
    }
  }
}
</script>

<template>
  <div>
    <el-button type="text" @click="openTable">{{ data.length }}个证书</el-button>

    <el-dialog append-to-body title="证书列表" :visible.sync="dialogTableVisible">
      <el-table :data="data">
        <el-table-column property="name" label="证书名称" />
        <el-table-column property="expire_at" label="过期时间" />
        <el-table-column label="附件">
          <template slot-scope="scope">
            <el-button v-if="attachment(scope.row)" type="text" @click="downloadAttachment(scope.row)"><i class="el-icon-download" />下载</el-button>
            <span v-else>无附件</span>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>
